<template>
    <div class="usermanage">
        <div>
            <el-button type="success" @click="dialogFormVisible = true">添加用户</el-button>
        </div>
        <el-table :data="filterTableData" style="width: 100%">
            <el-table-column label="用户ID" prop="id" />
            <el-table-column label="用户名称" prop="userName" />
            <el-table-column label="用户密码" prop="password" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索用户名" />
                </template>
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="small" type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table> 

        <!-- 添加商品对话框 -->
        <el-dialog v-model="dialogFormVisible" title="添加用户">
            <el-form :model="form">
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                    <el-input v-model="form.userName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户密码" :label-width="formLabelWidth">
                    <el-input v-model.number="form.password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户" :label-width="formLabelWidth">
                    <el-input v-model.number="form.type" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="add()">
                        确认添加
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加商品对话框结束 -->

        <!-- 修改商品对话框 -->
        <el-dialog v-model="dialogEditVisible" title="修改用户">
            <el-form :model="editform">
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                    <el-input v-model="editform.userName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户密码" :label-width="formLabelWidth">
                    <el-input v-model.number="editform.password" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogEditVisible = false">取消</el-button>
                    <el-button type="primary" @click="update()">
                        确认修改
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加商品对话框结束 -->
    </div>
</template>
<script setup>
import { computed, ref } from 'vue'
import axios from 'axios'

const search = ref('')
// 搜索
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.userName.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index, row) => {
    //弹出修改对话框
    dialogEditVisible.value = true
    //将要编辑的数据对象绑定给form
    editform.value = row
}
// index:要删除数据的行号，row:要删除的数据对象
const handleDelete = async (index, row) => {
    console.log(row.id)
    await axios.delete(`http://localhost:3001/userList/${row.id}`)
    // 刷新页面数据
    getData()
}

const tableData = ref([])

//获取数据
const getData = () => {
 axios.get('http://localhost:3001/userList').then(res=>{
    tableData.value = res.data
 })
}

getData()

//添加商品
import { reactive } from 'vue'

//添加对话框是否显示
const dialogFormVisible = ref(false)
//修改对话框是否显示
const dialogEditVisible = ref(false)
const formLabelWidth = '140px'
//绑定添加商品表单数据
const form = reactive({
    userName: '',
    password: '',
    type:''
})
//绑定修改商品表单数据
const  editform = ref({
    userName: '',
    password: ''
})
//添加用户方法
const add = () => {
    axios.post('http://localhost:3001/userList', form).then(res => {
        alert('添加成功')
        dialogFormVisible.value = false
        getData()
    }).catch(() => {
        alert('添加失败')
    })

}
//修改用户方法
const update = async ()=>{
     console.log(form.id)
     await axios.put(`http://localhost:3001/userList/${editform.value.id}`,editform.value)
     dialogEditVisible.value = false
     getData()
}
</script>

<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>